<!--
 * @Descripttion: 
 * @version: 
 * @Author: 宁乃楚
 * @Date: 2021-07-01 15:37:05
 * @LastEditors: 宁乃楚
 * @LastEditTime: 2021-07-07 16:27:02
-->
<template>
  <div class="mine">
    <div class="header_bg"></div>
    <div class="header_user">
      <div class="user_photo">
        <img :src="userInfo.userFace" alt="" />
      </div>
      <div class="name">{{ userInfo.username }}</div>
      <div class="flex">
        <div class="count">
          <p class="p1">账户余额:</p>
          <p class="p2">{{ userInfo.balance }}</p>
        </div>
        <div class="btn">
          <van-button class="button" plain type="primary" @click="show = true"
            >充值</van-button
          >
        </div>
      </div>
    </div>
    <div class="cellArea">
      <van-cell-group>
        <van-cell
          title="常用地址"
          icon="map-marked"
          to="/manager/address"
          is-link
        />
        <van-cell title="联系我们" icon="phone" is-link />
        <van-cell
          title="账户与安全"
          icon="manager"
          to="/manager/account"
          is-link
          value="开启账户保障"
        />
        <van-cell title="关于我们" @click="showPopup" icon="youzan-shield" is-link />
        <van-popup v-model="showus">
          <img src="../../assets/showus.gif" alt="" style="height: 400px;width: 200px;">
        </van-popup>
      </van-cell-group>
    </div>

    <van-action-sheet
      title="充值"
      v-model="show"
      @select="onSelect"
      @cancel="onCancel"
    >
      <div class="money">
        <span>充值金额</span>
        <input type="text" v-model="pay_money" placeholder="请输入充值金额" />
      </div>
      <div class="submit">
        <button @click="Pay()">提交</button>
      </div>
    </van-action-sheet>
    <div class="loginout_btn" @click="loginOut">退出登录</div>
  </div>
</template>

<script>
// 引入vuex的辅助函数
import { mapActions, mapState } from "vuex";
// 引入axios
import { get } from "@/http/axios";
export default {
  data() {
    return {
      show: false,
      showus:false,
      pay_money: "",
    };
  },
  computed: {
    // 引入user vuex中的方法
    ...mapState("user", ["token"]),
    ...mapState("user", ["userInfo"]),
  },
  methods: {
    // 引入user vuex中的方法
    ...mapActions("user", ["getUserInfo"]),
    loginOut() {
      this.$router.push({
        path: "/login",
      });
    },
    // 查询用户数据
    queryUserInfo() {
      var data = {
        token: this.token,
      };
      // 调用vuex中的方法 传参
      this.getUserInfo(data);
    },
    onSelect(item) {
      console.log(item);
      this.show = false;
      this.$toast({
        message: item.name,
        duration: 500,
      });
    },
    onCancel() {
      this.pay_money="";
    },
    // showus
    showPopup() {
      this.showus = true;
    },
    // 充值方法
    async Pay() {
      let data = {
        customerId: this.userInfo.id,
        money: this.pay_money,
      };
      let res = await get("/account/recharge", data);
      // 给用户一个成功或失败的提示
      if (res.status == 200) {
        this.$notify({
          message: res.data.message,
          background: "pink",
          duration: 1000,
        });
        this.show = false;
        this.getUserInfo();
      } else {
        this.$notify.error(res);
      }
    },
  },
  created() {
    // 自动获取用户数据
    this.queryUserInfo();
  },
};
</script>

<style scoped>
.header_bg {
  height: 180px;
  background-color: pink;
  border-bottom-left-radius: 50%;
  border-bottom-right-radius: 50%;
}
.header_user {
  width: 80%;
  height: 170px;
  background-color: #fff;
  position: absolute;
  top: 170px;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.8;
  box-shadow: 0 0 10px #ccc;
  border-radius: 8px;
  padding: 0 1em;
}
.user_photo {
  width: 95px;
  height: 95px;
  border-radius: 50%;
  background-color: #bf73ff;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
}
.user_photo img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.cellArea {
  margin: 130px auto 60px auto;
  box-shadow: 4px 4px 4px 0 rgb(158 117 255 / 20%);
  transition: 0.3s;
  width: 95%;
  border-radius: 5px;
}
.loginout_btn {
  background-image: linear-gradient(90deg, #7579ff, #bf73ff);
  width: 53%;
  height: 40px;
  text-align: center;
  color: #fff;
  border-radius: 22px;
  line-height: 40px;
  margin: 0 auto;
  margin-top: 2em;
  cursor: pointer;
}
.name {
  width: 50%;
  margin: 0 auto;
  margin-top: 3.5em;
  text-align: center;
}
.flex {
  display: flex;
  justify-content: space-around;
  margin-top: 1em;
}
.flex_item2 {
  width: 24%;
  height: 40px;
  text-align: center;
  cursor: pointer;
}
.button {
  border-radius: 999px;
  width: 100%;
  top: 35%;
  color: white;
  background-image: linear-gradient(90deg, #7579ff, #bf73ff);
}
.money {
  display: flex;
}
.money input {
  border: 0;
  font-size: 14px;
  line-height: 24px;
}
input::-webkit-input-placeholder {
  /* WebKit browsers */
  color: #999;
  
}
.money span {
  -webkit-box-flex: 0;
  -webkit-flex: none;
  flex: none;
  font-size: 14px;
  line-height: 24px;
  box-sizing: border-box;
  width: 6.2em;
  margin-right: 12px;
  color: #646566;
  text-align: center;
  word-wrap: break-word;
}

.submit {
  width: 384px;
  height: 44px;
  margin: 16px;
}
.p1 {
  margin-top: 15px;
  font-size: 16px;
  color: #999;
}
.p2 {
  font-size: 22px;
  margin-top: -10px;
  color: #7579ff;
}
.submit button {
  width: 100%;
  height: 100%;
  color: white;
  background: rgb(120, 121, 255);
  border: 0;
  border-radius: 999px;
}
</style>